import * as echarts from 'echarts'
import {useFindEmptyDataIndex} from '@/hooks'

/**
 * 根据水质类别筛选的 - 单纵坐标折线图
 * @param el
 * @param params
 * @author 赵京涛
 */
export const useAccordingWaterLeverLineCharts = (el, params) => {
  const { startIndex } = useFindEmptyDataIndex(params.seriesData)
  const startPercentage = (startIndex / params.xData.length).toFixed(2) * 100
  const myChart = echarts.init(el)
  const option = {
    // 触发类型
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      formatter: function(paramsValue) {
        let result = paramsValue[0].name + '<br>'
        for (let i = 0; i < paramsValue.length; i++) {
          if (params.yName === '水质类别') {
            const value = paramsValue[i].value
            let category
            switch (value) {
              case 1:
                category = '一类'
                break
              case 2:
                category = '二类'
                break
              case 3:
                category = '三类'
                break
              case 4:
                category = '四类'
                break
              case 5:
                category = '劣四类'
                break
              default:
                category = value
            }
            result += paramsValue[i].marker + ' ' + paramsValue[i].seriesName + ': ' + category + '<br>'
          } else {
            result += paramsValue[i].marker + ' ' + paramsValue[i].seriesName + ': ' + paramsValue[i].value + '<br>'
          }
        }
        return result
      }
    },
    // 菜单
    legend: {
      data: params.legendData
    },
    // X轴区域缩放
    dataZoom: [
      {
        type: 'inside',
        start: startPercentage,
        end: 100
      },
      {
        start: 0,
        end: 10,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
          color: '#fff',
          shadowBlur: 3,
          shadowColor: 'rgba(0, 0, 0, 0.6)',
          shadowOffsetX: 2,
          shadowOffsetY: 2
        }
      }],
    // 图表距离页面边距位置
    grid: {
      left: '3%',
      right: '4%',
      bottom: params.bottom
    },
    // 工具配置项
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          show: true,
          name: params['saveAsImageTitle'],
          title: '将' + params['saveAsImageHoverMsg'] + '（统计图）保存为图片'
        }
      }
    },
    // X轴数据
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: params.xData,
      axisLabel: {
        interval: 0,
        rotate: params['rotateDage']
      }
    },
    // Y轴
    yAxis: {
      name: params.yName,
      type: 'value',
      axisLine: {
        show: true
      },
      axisTick: {
        show: true,
        inside: 'false',
        length: 20
      },
      splitLine: {
        show: true
      }
    },
    // 图表数据
    series: params.seriesData
  }
  // 调用 clear 方法清空图表中的数据
  myChart.clear()
  option && myChart.setOption(option)
  window.onresize = function() {
    myChart.resize()
  }
}
